<!DOCTYPE html>
<html>
	
	<head>
		<title>xViewer</title>
		<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">

        <script src="Libs/gl-matrix.js"></script>
        <script src="Libs/webgl-utils.js"></script>
		<script type="text/javascript" src="Viewer/xbim-product-type.debug.js"></script>
		<script type="text/javascript" src="Viewer/xbim-state.debug.js"></script>
		<script type="text/javascript" src="Viewer/xbim-shaders.debug.js"></script>
		<script type="text/javascript" src="Viewer/xbim-model-geometry.debug.js"></script>
		<script type="text/javascript" src="Viewer/xbim-model-handle.debug.js"></script>
		<script type="text/javascript" src="Viewer/xbim-binary-reader.debug.js"></script>
		<script type="text/javascript" src="Viewer/xbim-triangulated-shape.debug.js"></script>
        <script type="text/javascript" src="Viewer/xbim-viewer.debug.js"></script>
        <script src="Libs/jquery.js"></script>
	    
        <style>
            html, body {
                height: 100%;
                padding: 0;
                margin: 0;
            }

            canvas {
                display: block;
                border: none;
                margin-left: auto;
                margin-right: auto;
                width: 100%;
                height: 100%;
            }

            #info {
                position: absolute;
                left: 20px;
                top: 20px;
                padding: 10px;
                z-index: 2; 
                background: white;
            }
        </style>

	</head>
	
	
	<body>
		
		<div id="info">
			<div>
				Selected ID: <span id = "id" ></span>
			</div>
			<div>
				Framerate (FPS): <span id="fps"></span> 
			</div>
		    <div>
		        <input type="file" id="input" accept=".wexbim"/>
		    </div>
		    <div id="models">
		        
		    </div>
		    <div id="errLog" style="color: red">
		        
		    </div>
		</div>
		<canvas id="xBIM-viewer"></canvas>
	<script type="text/javascript">
        var models = [];

	    var viewer = new xViewer("xBIM-viewer");
	    viewer.background = [255, 255, 255];
	    viewer.on("error", function (arg) {
	        var container = viewer._canvas.parentNode;
	        if (container) {
	            //preppend error report
	            container.innerHTML = "<pre style='color:red;'>" + arg.message + "</pre>" + container.innerHTML;
	        }
	    });
	    viewer.on("pick", function(arg){
	        var span = document.getElementById("id");
	        if (span){
	            span.innerHTML = arg.id;
	        }
	    });
        viewer.on("loaded", function(model) {
            models.push({id: model.id, name: model.tag, stopped: false});
            refreshModelsPanel();
        });
	    viewer.on("fps", function(fps){
	        var span = document.getElementById("fps");
	        if (span){
	            span.innerHTML = fps;
	        }
	    });

	    $("#input").change(function () {
	        if (!input.files) return;

	        var file = this.files[0];
	        if (!file) return;

	        viewer.load(file, file.name);
	        viewer.start();
	    });

        function refreshModelsPanel() {
            var html = "";
            models.forEach(function(m) {
                html += "<div> " + m.name + "&nbsp;";
                html += "<button onclick='unload(" + m.id + ")'> Unload </button>";
                if (m.stopped)
                    html += " <button onclick='start(" + m.id + ")'> Start </button> ";
                else
                    html += " <button onclick='stop(" + m.id + ")'> Stop </button> ";
                html += "</div>";
            });
            $("#models").html(html);
        }
        function unload(id) {
            viewer.unload(id);
            models = models.filter(function (m) { return m.id !== id });
            refreshModelsPanel();
        }
        function stop(id) {
            viewer.stop(id);
            var model = models.filter(function (m) { return m.id === id }).pop();
            model.stopped = true;
            refreshModelsPanel();
        }

        function start(id) {
            viewer.start(id);
            var model = models.filter(function (m) { return m.id === id }).pop();
            model.stopped = false;
            refreshModelsPanel();
	    }
	</script>
	</body>
	
</html>
